<!-- -->
<template>
  <div class="discount">
    <el-container>
      <el-header>
        <span>我的优惠</span>
      </el-header>
      <el-main>
        <div v-if="disCount.length == 0" class="displayCoupon">
          <div style="height:80%">
            <img
              style="height:100%"
              src="../../../assets/coupon_background.png"
              alt=""
            />
          </div>
          <div style="height:15%">
            <h1>您目前还没有优惠券哦</h1>
          </div>
        </div>
        <!-- id: "",
          name: "",
          conditons: "",
          discount: "",
          create_time: "",
          delete_time: "" -->
        <div v-else style="height:100%;width:100%;">
          <div class="coupon" v-for="item in disCount" :key="item.id">
            <div class="coupon_left">
              <div style="height:60%;">
                <div style="float:left;height:100%;padding:2px">
                  <h4>{{item.name}}</h4>
                </div>
                <div style="float:left;height:100%">
                  <span style="display:block;height:60px;lin-height:60px;font-size:60px;padding-left:14px">{{item.discount}}</span>
                </div>
              </div>
              <h6>{{ item.createTime }}至{{ item.deleteTime }}</h6>
            </div>
            <div class="coupon_right">
              <h2>优惠券</h2>
            </div>
          </div>
        </div>

        <!-- <ul>
                 <li v-for="item in disCount" :key="item.id">
                     <div class="coupon">{{item.name}}</div>
                 </li>
             </ul> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Discount",
  data() {
    return {
      userId:'',
      show: false,
      disCount: []
    };
  },
  created() {
    this.getDisCount();
  },

  components: {},

  filters: {},

  computed: {},

  methods: {
    getDisCount() {
      this.userId = sessionStorage.getItem("userId");
      this.axios
        .post("/api/coupons/findByUid", {
          id: "1"
        })
        .then(res => {
          // console.log(res.data);
          if (res.data.code == 200) {
            this.disCount = res.data.data.list;
            console.log(this.disCount);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.discount {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.discount::-webkit-scrollbar {
  display: none;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  line-height: 60px;
  text-align: left;
  border-bottom-color: #e6e6e6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.el-main {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  padding-left: 28px;
  padding-right: 28px;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.displayCoupon {
  width: 60%;
  height: 100%;

  margin-left: auto;
  margin-right: auto;
  /* background-color: black; */
}
.coupon {
  width: 30%;
  height: 20%;
  float: left;
  margin-left: 14px;
  margin-top: 14px;
  padding: 1%;
  /* background-color: #973444; */
  background-color: rgb(244, 240, 229);

  color: #973444;
}
.coupon_left {
  float: left;
  height: 100%;
  width: 80%;
  border-style: solid;
  border-width: 1px;
  border-color: #973444;
  background-color: rgb(244, 240, 229);
}
.coupon_right {
  float: left;
  height: 100%;
  width: 18%;
  margin-left: -1px;
  border-style: solid;
  border-width: 1px;
  border-color: #973444;

  writing-mode: vertical-lr;
}
.coupon_right h2 {
  direction: inherit;
}
</style>